<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务登记</block>
		</cu-custom>
		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="detail-left detail-inner" style="padding: 0 30rpx">
								服务项目与服务对象不匹配，请确认以后再提交
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal2')">
							我知道了
						</button>
						<!-- <button class="cu-btn bg-blue margin-left" @tap="hideModal">提交</button> -->
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认登记</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="det_topsss_inner"> </view>
							<view class="detail-right detail-inner det_topsss_right">
								<view>服务对象</view>
								<view class="detail-content">
									{{ showItem.preName }}:{{ showItem.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal1')">
							取消
						</button>
						<button class="cu-btn bg-blue margin-left" @tap="realSubmit(data)">
							提交
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部卡 -->
		<view class="padding-sm">
			<view class="radius shadow shadow-lg bg-white det_top">
				<view class="detail">
					<view class="detail-right detail-right-tp">
						<view class="detail-right-inner">
							<view>区域:</view>
							<view>{{ item.areaName }}</view>
						</view>
						<view class="detail-right-inner">
							<view>服务点：</view>
							<view>{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-sm">
			<view class="radius  padding-sm  bg-white det_top">
				<view v-if="data.length != 0">
					<view v-for="(item, index) in data" :key="index" class="register-item">
						<view class="goods-title">
							{{ item.serviceItemName }}
						</view>
						<view class="goods" v-if="item.useItem">
						  <label @click="changeValue(index,item)">
						    <checkbox
						      style="transform: scale(0.7)"
						      class="blue"
						      :class="item.checked ? 'checked' : ''"
						      :checked="item.checked"
						    /><text>需要使用物品</text>
						  </label>
						  <block v-if="item.checked">
						    <input
						      placeholder="物品名称"
						      class="left"
						      v-model="item.useItem"
						      type="text"
						    />
						    <input
						      placeholder="数量"
						      class="right"
						      v-model="item.useNum"
						      type="number"
						      v-if="item.useNum != undefined"
						    />
						    <input
						      placeholder="数量"
						      class="right"
						      v-model="item.useNum"
						      type="number"
						      v-if="item.useNum == undefined"
						    />
						    <text>件</text>
						  </block>
						</view>
						<!-- 单选多选 -->
						<view
						  v-if="item.customItem.length != 0"
						  v-for="(it, indexs) in item.customItem"
						  :key="indexs"
						>
						  <view class="assist" v-if="it.classify == '单选'">
						    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
						    <radio-group name="" class="inner-right">
						      <view
						        class="right"
						        v-for="(radio, radioIndex) in it.option"
						        :key="radioIndex"
						      >
						        <label>
						          <radio
						            style="transform: scale(0.7)"
						            v-model="it.value"
						            :checked="it.value == radio ? true : false"
						          /><text @click="readName(radio)">{{ radio }}</text>
						        </label>
						      </view>
						    </radio-group>
						  </view>
						  <view class="assist" v-if="it.classify == '多选'">
						    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
						    <view
						      class="right"
						      v-for="(radio, radioIndex) in it.value"
						      :key="radioIndex"
						    >
						      <label @click="radio.checked = !radio.checked" class="inner-right">
						        <checkbox
						          class="blue"
						          style="transform: scale(0.7)"
						          :class="radio.checked ? 'checked' : ''"
						          :checked="radio.checked ? true : false"
						          v-model="radio.value"
						        /><text @click="readName(radio.label)">{{ radio.label }}</text>
						      </label>
						    </view>
						  </view>
						  <view
						    class="textarea"
						    v-if="it.classify == '文字输入'"
						    style="display: flex"
						  >
						    <view class="inner"  @click="readName(it.title)">{{ it.title }}：</view>
						    <textarea v-model="it.value" placeholder="请输入文字" class="textarea-inner"/>
						  </view>
						</view>

				
				
            <!-- 备注 -->
            <view style="margin-top: 12rpx" @click="readRemark">
              <view class="radius shadow-lg bg-white det_top notes_outer">
                <view class="left"> 登记备注: </view>
                <view class="notes">
                  <input
                    type="text"
                    v-model="item.recordRemark"
                    placeholder="请输入服务登记备注内容"
                    placeholder-style="font-size:28rpx"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
    
	
	  </view>
    </view>
	<view class="success" @click="saoma">
	  <view class="success-left">
	    <image src="../../../static/img/u35.png" mode=""></image>
	  </view>
	  <view class="success-right">
	    您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作
	  </view>
	</view>
    <!-- 	<view>
				<button type="primary" @click="realSubmit(data)">提交</button>
			</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      modalName: "",//弹框的名字
      value: true,
      data: [],//上页面传递的数组
      item: {},//上页面传递的对象
      customList: [],
      serviceTarget: "2",//0是区域的标志
      showItem: {},//后台返回的弹框对象
    };
  },
  onShow() {},
  onLoad(options) {
    this.serviceTarget = 2;
    this.data = JSON.parse(options.data);
    this.item = JSON.parse(options.item);
    console.log(this.item);
    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ");
  },
  onHide() {},
  methods: {
	  readName(name){
	  		  if(this.$store.state.state&&this.$store.state.isphone){
	  		  	getApp().globalData.TTSSpeaker.stop();
	  		  	getApp().globalData.TTSSpeaker.speak(name,1);
	  		  }	
	  },
	  saoma(){
		 if(this.$store.state.state&&this.$store.state.isphone){
		 	getApp().globalData.TTSSpeaker.stop();
		 	getApp().globalData.TTSSpeaker.speak(` 您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作`,1);
		 }	 
	  },
	  readRemark(){
	  		if(this.$store.state.state&&this.$store.state.isphone){
	  			getApp().globalData.TTSSpeaker.stop();
	  			getApp().globalData.TTSSpeaker.speak('登记备注',1);
	  		}	 
	  },
    changeValue(index) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('需要使用物品',1);
		}	
      this.data[index].checked = !this.data[index].checked;
      if (!this.data[index].checked) {
        this.data[index].useItem = "";
        this.data[index].useNum = "";
      }
    },
    // 弹框
    showModal(item) {
      this.modalName = item;
      if (item == "DialogModal1") {
      } else if (item == "DialogModal2") {
      }
    },
    hideModal(e) {
      this.modalName = null;
    },
    readCard(id) {
      this.$http(
        "/implement-service/implement/getByRfidCardIdForService",
        "get",
        {
          rfidCardId: id,
        }
      ).then((res) => {
        console.log(res, 9999);
        if (res.data.code == 200) {
          let data = res.data.data;
          if (data == undefined) {
            uni.showToast({
              icon: "none",
              title: "这是个空标签",
            });
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('这是个空标签',1);
			}
          } else if (
            data.serviceTarget == this.serviceTarget && data.serviceObject.id == this.item.id
          ) {
            this.showItem = res.data.data.serviceObject;
            this.item.areaSiteId = res.data.data.serviceObject.id;
            // this.showModal("DialogModal1");
			this.realSubmit(this.data);
          } else {
            // this.showModal("DialogModal2");
			uni.showToast({
			    title: '服务项目与服务对象不匹配',
				icon:'none',
			    duration: 1500,
			});
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('服务项目与服务对象不匹配',1);
			}
          }
        }
      });
    },
    oldServiceRecord() {
      let param = {};
      param.teamId = uni.getStorageSync();
      this.$http("/care-service/oldServiceRecord/save", "get", param).then(
        (res) => {
          if (res.data.code == 200) {
          }
        }
      );
    },
    realSubmit(data) {
      let param = {};
      param.siteServiceRecordQueries = [];
      let teamId = uni.getStorageSync("teamId");
      for (let item = 0; item < data.length; item++) {
        data[item].customItem = JSON.stringify(data[item].customItem);
        param.siteServiceRecordQueries[item] = {};
        param.siteServiceRecordQueries[item].customItem = data[item].customItem;
        param.siteServiceRecordQueries[item].employeeId = data[item].employeeId;
        param.siteServiceRecordQueries[item].areaSiteId = this.item.areaSiteId;
        param.siteServiceRecordQueries[item].recordRemark =
          data[item].recordRemark;
        param.siteServiceRecordQueries[item].serviceCycle =
          data[item].serviceCycle;
        param.siteServiceRecordQueries[item].teamId = teamId;
        param.siteServiceRecordQueries[item].serviceItemId =
          data[item].serviceItemId;
        param.siteServiceRecordQueries[item].timeRange = data[item].timeRange;
        param.siteServiceRecordQueries[item].useItem = data[item].useItem;
        if (data[item].useNum == undefined) {
          param.siteServiceRecordQueries[item].useNum = 0;
        } else {
          param.siteServiceRecordQueries[item].useNum = data[item].useNum;
        }
      }
      this.$http("/care-service/areaService/save", "post", param).then(
        (res) => {
          if (res.data.code == 200) {
            // item.name
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('刷卡提交成功',1);
			}
				uni.showToast({
				    title: '刷卡提交成功',
					icon:'none',
				    duration: 1500,
				});
				setTimeout(function(){
					uni.switchTab({
					    url: '/pages/basics/index'
					});
				},1500)
          }else{
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('提交失败',1);
			}else{
					uni.showToast({
						title: "提交失败",
						uration: 2000,
						icon:'none'
					 });
			}		
		}
        }
      );
    },
    submit() {},
    changeRadio(item, index, indexs) {
      this.data[index].customItem[indexs].value = item;
    },
  },
};
</script>

<style scoped lang="scss">
.detail-right-tp {
  flex-direction: column;
  padding-top: 20rpx;
  padding-left: 10rpx;
  .detail-right-inner {
    width: 100%;
    justify-content: flex-start;
  }
}
.register-item {
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
page {
  background-color: #f2f2f2;
}
.detail-right-inner {
  display: flex;
  align-items: center;
  view:nth-child(1) {
    width: 200rpx;
  }
  padding-left: 30rpx;
  margin-bottom: 10rpx;
}
.detail-right-inner {
  display: flex;
  align-items: center;
  view:nth-child(1) {
    width: 200rpx;
  }
  padding-left: 30rpx;
  margin-bottom: 10rpx;
}
.detail {
  display: flex;
  .detail-img {
    width: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.detail-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-left: 12rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #cccccc;
  .left {
    flex: 1;
    margin-right: 20rpx;
    font-size: 34rpx;
  }
  .right {
    flex: 5;
  }
}
.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 100rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .inner{
  }
  .right {
    flex: 1;
  }
  .inner-right{
		flex: 1;
		display: flex;
		align-items: center;
	}
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.goods-title {
  margin-bottom: 12rpx;
  font-size: 34rpx;
  color: #333333;
}
.textarea {
  margin-top: 12rpx;
  textarea {
    border: 1rpx solid #cccccc;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
}
.success{
		display: flex;
		padding:20rpx 30rpx;
		background-color: #FFFFFF;
		.success-left{
			margin-right:30rpx;
			image{
				width:60rpx;
				height: 60rpx;
			}
		}
	}
</style>
